<template>
    <el-dialog :title="'排队详情'" append-to-body modal-append-to-body :visible.sync="lineUpDetail" destroy-on-close @close="closeDialog">
      <el-table
      :data="lineUpData"
      style="width: 100%">
        <el-table-column
        label="客户号码">
          <template scope="scope">{{ scope.row.FromCid }}</template>
        </el-table-column>
        <el-table-column
        label="服务号">
          <template scope="scope">{{ scope.row.ServiceNo }}&nbsp;{{ scope.row.ServiceNoName || ''}}</template>
        </el-table-column>
        <el-table-column
          prop="QueueName"
          label="技能组">
        </el-table-column>
        <el-table-column
          label="本技能组等待时长">
          <template slot-scope="scope">
            <LineUpTimer :timer='scope.row.JoinTime'></LineUpTimer>
          </template>
        </el-table-column>
        <el-table-column
          label="累计等待时长">
          <template slot-scope="scope">
            <LineUpTimer :timer='scope.row.FirstJoinTime'></LineUpTimer>
          </template>
        </el-table-column>
     </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button class="primary_btn" @click="lineUpDetail=false">{{$t('public.colse')}}</el-button>
      </span>
    </el-dialog>
</template>
<script>
  import LineUpTimer from './LineUpTimer.vue'
  export default {
    name: 'QueueOrServiceNoDetail',
    data () {
      return {
        lineUpDetail: false
      }
    },
    components: {
      LineUpTimer
    },
    props: {
      type: {type: String, default: ''},
      lineUpData: {type: Array, default: ()=> {
        return []
      }}
    },
    methods: {
      openDialog () {
        this.lineUpDetail = true
      },
      closeDialog () {
        this.$emit('closeQueueServiceDialog')
      }
    }
  }
</script>
